import { editor } from "@/grida-canvas";
import grida from "@grida/schema";
import kolor from "@grida/color";

export namespace prototypes {
  export const row = {
    type: "container",
    name: "row",
    width: 100,
    height: "auto",
    position: "relative",
    style: {},
    z_index: 0,
    opacity: 1,
    rotation: 0,
    corner_radius: 0,
    layout: "flex",
    direction: "horizontal",
    main_axis_alignment: "start",
    cross_axis_alignment: "start",
    expanded: true,
    main_axis_gap: 16,
    cross_axis_gap: 16,
    padding: 0,
    children: [
      {
        type: "rectangle",
        name: "a",
        width: 100,
        height: 100,
        position: "relative",
        z_index: 0,
        opacity: 1,
        rotation: 0,
        corner_radius: 0,
        fill: {
          type: "solid",
          color: kolor.colorformats.RGBA32F.BLACK,
          active: true,
        },
        stroke_width: 0,
        stroke_cap: "butt",
      },
      {
        type: "rectangle",
        name: "b",
        width: 100,
        height: 100,
        position: "relative",
        z_index: 0,
        opacity: 1,
        rotation: 0,
        corner_radius: 0,
        fill: {
          type: "solid",
          color: kolor.colorformats.RGBA32F.BLACK,
          active: true,
        },
        stroke_width: 0,
        stroke_cap: "butt",
      },
      {
        type: "rectangle",
        name: "c",
        width: 100,
        height: 100,
        position: "relative",
        z_index: 0,
        opacity: 1,
        rotation: 0,
        corner_radius: 0,
        fill: {
          type: "solid",
          color: kolor.colorformats.RGBA32F.BLACK,
          active: true,
        },
        stroke_width: 0,
        stroke_cap: "butt",
      },
    ],
  } satisfies grida.program.nodes.NodePrototype;

  export const column = {
    ...row,
    direction: "vertical",
  } satisfies grida.program.nodes.NodePrototype;

  export const text = {
    type: "text",
    width: "auto",
    height: "auto",
    position: "relative",
    z_index: 0,
    opacity: 1,
    rotation: 0,
    text: "Hello, World!",
    style: {},
    text_align: "left",
    text_align_vertical: "top",
    line_height: 1.2,
    letter_spacing: 0,
    ...editor.config.fonts.DEFAULT_TEXT_STYLE_INTER,
  } satisfies grida.program.nodes.NodePrototype;

  export const image = {
    type: "image",
    src: "/dummy/image/png/png-square-transparent-1k.png",
    width: 100,
    height: 100,
    position: "relative",
    z_index: 0,
    opacity: 1,
    rotation: 0,
    corner_radius: 0,
    style: {},
    fit: "cover",
  } satisfies grida.program.nodes.NodePrototype;

  export const video = {
    type: "video",
    src: "/dummy/video/mp4/mp4-30s-5mb.mp4",
    width: 320,
    height: 240,
    position: "relative",
    z_index: 0,
    opacity: 1,
    rotation: 0,
    corner_radius: 0,
    style: {},
    fit: "cover",
    loop: true,
    muted: true,
    autoplay: true,
  } satisfies grida.program.nodes.NodePrototype;

  export const badge = {
    type: "container",
    name: "badge",
    width: "auto",
    height: "auto",
    position: "relative",
    z_index: 0,
    opacity: 1,
    rotation: 0,
    corner_radius: 16,
    style: {},
    layout: "flex",
    direction: "horizontal",
    main_axis_alignment: "center",
    cross_axis_alignment: "center",
    expanded: true,
    main_axis_gap: 8,
    cross_axis_gap: 8,
    padding: 8,
    fill: {
      type: "solid",
      color: kolor.colorformats.RGBA32F.BLACK,
      active: true,
    },
    children: [
      {
        type: "text",
        name: "label",
        width: "auto",
        height: "auto",
        position: "relative",
        z_index: 0,
        opacity: 1,
        rotation: 0,
        text: "Label",
        style: {},
        fill: {
          type: "solid",
          color: kolor.colorformats.RGBA32F.WHITE,
          active: true,
        },
        text_align: "center",
        text_align_vertical: "center",
        line_height: 1.2,
        letter_spacing: 0,
        ...editor.config.fonts.DEFAULT_TEXT_STYLE_INTER,
      },
    ],
  } satisfies grida.program.nodes.NodePrototype;

  export const avatar = {
    type: "container",
    name: "avatar",
    width: 48,
    height: 48,
    position: "relative",
    z_index: 0,
    opacity: 1,
    rotation: 0,
    corner_radius: 24,
    style: {
      overflow: "hidden",
    },
    layout: "flex",
    direction: "horizontal",
    main_axis_alignment: "center",
    cross_axis_alignment: "center",
    expanded: true,
    main_axis_gap: 8,
    cross_axis_gap: 8,
    padding: 0,
    fill: {
      type: "solid",
      color: kolor.colorformats.RGBA32F.WHITE,
      active: true,
    },
    children: [
      {
        type: "image",
        name: "image",
        src: "/dummy/image/png/png-square-transparent-1k.png",
        width: 48,
        height: 48,
        position: "relative",
        z_index: 0,
        opacity: 1,
        rotation: 0,
        corner_radius: 0,
        style: {},
        fit: "cover",
      },
    ],
  } satisfies grida.program.nodes.NodePrototype;

  export const embed = {
    type: "iframe",
    src: "https://example.com",
    width: 320,
    height: 240,
    position: "relative",
    z_index: 0,
    opacity: 1,
    rotation: 0,
    corner_radius: 0,
    style: {},
  } satisfies grida.program.nodes.NodePrototype;
}
